<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/component/jsoneditor/css/jsoneditor.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
</head>
<body>

<form class="layui-form" action="">

    <div class="mainBox">
        <div class="main-container mr-5">
            <div class="layui-form-item">
                <label class="layui-form-label required" >参考图片</label>
                <div class="layui-input-block" >
                    <a type="button" class="layui-btn layui-btn-primary layui-btn-radius" id="reference_upload">
                        <i class="layui-icon">&#xe624;</i>上传图片
                    </a>
                    <tip style="margin-left: 10px;color: red;">请将图片按分段序号命名好再上传</tip>
                    <div class="reference_html_append"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-md">
                重置
            </button>
        </div>
    </div>

</form>

<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
<script src="/app/admin/admin/js/permission.js"></script>
<script src="/app/admin/admin/js/functions.js"></script>
<script src="/app/admin/admin/js/md5.js"></script>

<script>
    var upload_images = [];
    var upload;

    // 相关接口
    const PLANID = layui.url().search['planid'];
    const INSERT_API = "/app/admin/plan/part/uploadimage";

    layui.use(['form','element','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        upload = layui.upload;

        batch_upload_image(upload, 'reference_upload', batch_upload_reference);
    });


    //提交事件
    layui.use(["form", "popup"], function () {
        // 字段验证允许为空
        layui.form.on("submit(save)", function (data) {
            if(upload_images.length==0){
                layer.msg('请先上传图片',{time:1000,icon:2});
                return false;
            }
            let param = {};
            param.upload_images = upload_images;
            param.planid = PLANID;
            layui.$.ajax({
                url: INSERT_API,
                type: "POST",
                dateType: "json",
                data: param,
                async:true,
                headers: get_header(param),
                success: function (res) {
                    if (res.code) {
                        return layui.popup.failure(res.msg);
                    }
                    return layui.popup.success("操作成功", function () {
                        parent.refreshTable();
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });
                }
            });
            return false;
        });
    });

    //批量上传成功后，回调函数
    function batch_upload_reference(images,elem) {
        //console.log(images);
        $.each(images, function (i,v) {
            upload_images.push({"image":v.url,"name":v.name});
        })

        reference_render();
    }

    function delete_reference($this) {
        var name = $($this).data('name');

        $.each(upload_images, function (i,v) {
            if(v && name==v.name){
                upload_images.splice(i,1);
            }
        })

        reference_render();
    }

    function reference_render() {
        //console.log(upload_images);
        if(upload_images.length==0){
            $('.reference_html_append').html('');
            return false;
        }

        var upload_images_temp = [];
        var html = '';
        html += ' <fieldset class="table-search-fieldset" style="margin-top: 10px;padding-bottom:25px;border: 1px solid #e6e6e6;color: #6b6b6b;">\n';
        html += '   <div class="wrapper" style="display: flex;flex-direction:row;flex-wrap: wrap;">\n';
        $.each(upload_images, function (i,v) {
            html +=  '    <div class="app_icon_parent" style="padding:5px;width: 155px;height: 175px;"  draggable="true"\n' +
                '            ondragstart="onDragStart(event)"\n' +
                '            ondragover="onDragOver(event)"\n' +
                '            ondrop="onDrop(event,'+upload_images_draggable+')">\n';

            html += '          <div style="width: 170px;">';
            html += '               <img src="'+v.image+'" data-name="'+v.name+'" onclick="open_image(this)" style="width: 150px;height: 150px;">\n';
            html += '               <i class="layui-icon layui-icon-delete btn-delete-preview-image" data-name="'+v.name+'" onclick="delete_reference(this);event.cancelBubble =true;" style="color: red; font-size: 25px;position: relative;top: -150px;left: 125px;"></i>';
            html += '           </div>';
            html += '           <div style="margin-top: -20px;">'+v.name+'</div>';
            html += '          \n';
            html +=    '  </div>\n';

            upload_images_temp.push({image:v.image, name:v.name,sort:(i+1)});
        })

        html +='    </div>';
        html +='</fieldset>';

        $('.reference_html_append').html(html);

        upload_images = upload_images_temp;
    }

    //拖动后，回调函数，重新组合数据
    function upload_images_draggable() {
        upload_images = [];
        $('.wrapper').find('.app_icon_parent').each(function (i,v) {
            upload_images.push({image:$(v).find('img').attr('src'),name:$(v).find('img').data('name')});
        })

        reference_render();
    }
</script>

</body>
</html>
